@import "common.scss";
@import "m_reset.scss";

@function getvw($w) {
    @return($w/750)*100+vw;
}

.wrap {
    header {
        .top {
            height: getvw(100);
        }

        nav {
            width: getvw(750);
            display: flex;
            padding: getvw(17) getvw(23) getvw(9) getvw(23);
            justify-content: space-between;
            align-items: center;
            position: fixed;
            top: 0;
            background-color: white;
            z-index: 999;
            box-sizing: border-box;

            button {
                width: getvw(123);
                height: getvw(57);
                background-color: white;
                border-radius: getvw(20);
                border: 1px solid #ff9344;
            }

            p {
                font-size: getvw(25);
            }

            div {
                width: getvw(123);
                text-align: right;
                position: relative;

                i {
                    font-size: getvw(65);
                    color: #ff9344;
                }

            }

        }
    }

    .banner {
        width: getvw(750);

        img {
            width: 100%;
        }
    }

    .banner-bottom {


        .banner-bottom-top {
            display: flex;
            justify-content: space-between;
            padding: 0 getvw(20);
            margin: getvw(20) 0;

            div {
                p {
                    font-size: getvw(72);
                    text-align: center;
                    color: #ff9344;
                }
            }

            button {
                width: getvw(147);
                height: getvw(76);
                background-color: #ff9344;
                border-radius: getvw(40);
                border: none;
                color: white;
            }
        }

        .banner-bottom-bottom {
            display: flex;
            justify-content: space-between;
            padding: 0 getvw(20);
            margin: getvw(20) 0;
            align-items: center;

            div:nth-of-type(1) {
                display: flex;
                align-items: center;

                i {
                    font-size: getvw(30);
                    color: #ff9344;
                }

                p {
                    font-size: getvw(30);

                    span {
                        color: #ff9344;
                    }
                }
            }

            div:nth-of-type(2) {
                font-size: getvw(26);
                color: gray;
            }
        }

    }

    .main{
        .main-top{
            background-color: #ff9344;
            width: getvw(664);
            height: getvw(67);
            margin: 0 auto;
            display: flex;
            justify-content: space-between;
            align-items: center;
            padding: 0 getvw(20);
            span{
                font-size: getvw(30);
                color: white;
            }
        }
        .main-center{
            padding: 0 getvw(20);
            margin-top: getvw(10);
            display: flex;
            justify-content: space-between;
            align-items: center;
            div:nth-of-type(1){
                width: getvw(177);
                height: getvw(176);
                position: relative;
                img{
                    width: 100%;
                }
                div{
                    width: getvw(177);
                    height: getvw(40);
                    line-height: getvw(40);
                    text-align: center;
                    background-color: rgba($color: gray, $alpha: 0.7);
                    position: absolute;
                    top: getvw(90);
                }
            }
            div:nth-of-type(2){
                width: getvw(330);
                height: getvw(170);
                display: flex;
                flex-direction: column;
                justify-content: space-between;
                span:nth-of-type(1){
                    font-size: getvw(30);
                    font-weight: bold;
                }
                div{
                    width: getvw(300);
                    height: getvw(40);
                    display: flex;
                    align-items: center;
                    i{
                        color: #ff9344;
                        font-size: getvw(36);
                    }
                    span{
                        font-size: getvw(26);
                        color: gray;
                        font-weight: lighter;
                    }
                }
                span:nth-of-type(2){
                    color: gray;
                    font-size: getvw(24);
                }
                span:nth-of-type(3){
                    color: #ff9344;
                    font-size: getvw(20);
                }
            }
            button {
                width: getvw(147);
                height: getvw(76);
                background-color: #ff9344;
                border-radius: getvw(40);
                border: none;
                color: white;
            }
        }
    }
}